<template>
  <div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><b>种类：</b>{{typeName}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span><b>剩余任务：</b>{{leftTaskNum}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>

      <div class="query-box">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item label="状态">
            <el-select v-model="formInline.status" placeholder="请选择" clearable>
              <div v-for="(item, index) in selectOptions" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getOrdersPages">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="invite-box">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
<!--          <el-form-item label="新增" class="country-tel-box">-->
<!--            <IntlTelInput @excountry="childFn"></IntlTelInput>-->
<!--          </el-form-item>-->
          <el-form-item  class="new-tel-box" label=" 兼职号码">
            <el-input v-model="formInline.newPhone" placeholder="新增手机" style="width: auto" clearable></el-input>
            <el-tag>排队{{queueLength}}人</el-tag>
          </el-form-item>
          <el-form-item class="yaoqing-box">
            <el-button type="primary" @click="onSubmit">邀请</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="touchRefresh">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="task-list-box">
        <template>
          <el-table border :data="list" style="width: 100%">
            <el-table-column label="序号" type="index" width="auto">
            </el-table-column>
            <el-table-column label="手机号" width="auto">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.phoneNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="auto">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>返回状态：{{ scope.row.info }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag v-if="scope.row.status ===2" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                    <el-tag v-if="scope.row.status ===3"  type="success" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                    <el-tag v-if="scope.row.status ===4"  type="danger" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                    <el-tag v-if="scope.row.status ===7"  type="warning" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                    <el-tag v-if="scope.row.status ===1"  type="info" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                    <el-tag v-if="scope.row.status ===5"  type="info" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                    <el-tag v-if="scope.row.status ===6"  type="info" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                    <el-tag v-if="scope.row.status ===8"  type="info" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                    <el-tag v-if="scope.row.status ===9"  type="info" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                    <el-tag v-if="scope.row.status ===10"  type="info" size="medium">{{ scope.row.status | taskStatusFilter}}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="taskDetail(scope.$index, scope.row)">查看</el-button>
                <el-button size="mini"
                           @click="handleEdit(scope.row.id, scope.row.phoneNumber)"
                           v-if="scope.row.status === 4||scope.row.status === 6||scope.row.status === 7">
                  重置（剩余{{3-scope.row.resetCount}}次）
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <!--分页组件-->
            <el-pagination
              :total="total"
              :current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[5, 10, 20, 30, 50]"
              :pager-count="5"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background
              layout="total, sizes, prev, pager, next">
            </el-pagination>
          </div>
        </template>
        <!-- Table -->
        <el-dialog title="详情" :visible.sync="dialogTableVisible" width="70%" class="task-dialog-detail-box">
          <p><strong>ID：</strong>{{detail.id}}</p><el-divider/>
          <p><strong>手机号：</strong>{{detail.phoneNumber}}</p><el-divider/>
          <p><strong>用户：</strong>{{detail.username}}</p><el-divider/>
          <p><strong>状态：</strong>{{detail.statusName}}</p><el-divider/>
          <p><strong>关联：</strong>{{detail.taskData}}</p><el-divider/>
          <p><strong>时间：</strong>{{detail.returnTime}}</p><el-divider/>
          <p><strong>返回状态：</strong>{{detail.info}}</p><br>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
  //这里可以导入其他文件，如：组件、工具js、第三方插件js、json文件、图片文件等
  //例如：import [组件名称] from [组件路径];
  import IntlTelInput from './IntlTelInput'
  import mapStatusOption from "../utils/mapStatusOption";

  export default {
    name: 'TaskList',
    inject: ['reload'],
    //import引入的组件需要注入到对象中才可以使用
    components: {IntlTelInput},
    //父子组件传递数据
    props: {},
    data() {
      //这里存放数据
      return {
        queueLength: 0,
        selectOptions: [
          {label: '排队中', value: 1},
          {label: '正在做单', value: 2},
          {label: '做单完成', value: 3},
          {label: '做单失败', value: 4},
          {label: '待反馈', value: 5},
          {label: '卡单', value: 6},
          {label: '不存在', value: 7},
          {label: '无unban', value: 8},
          {label: '解封结果异常', value: 9},
          {label: '双封', value: 10}
        ],
        detail:{
          id: '',
          phoneNumber:'',
          username: '',
          returnTime: '',
          statusName: '',
          taskData: '',
          info: ''
        },
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialCode: '',
        formInline: {
          phone: '',
          newPhone: '',
          status: '',
          statusName: '',
        },
        typeName: '',
        leftTaskNum: '',
        total: 0,
        pageSize: 20,
        currentPage: 1,
        pageNum: '',
        list: [],
      };
    },
    //计算属性，类似于data概念
    computed: {},
    //侦听器，监听data中的数据变化
    watch: {
      '$route' : 'getOrdersPages',
    },
    filters: {
      taskStatusFilter: mapStatusOption
    },
    methods: {
      handleCurrentChange(val){
        this.currentPage = val;
        this.getOrdersPages();
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.getOrdersPages();
      },
      childFn(dialCode){
        console.log('dialCode= ', dialCode)
        this.dialCode = dialCode;
      },

      onSubmit() {
        let code = this.dialCode.dialCode || this.dialCode;
        console.log('this.dialCode==',code)
        let newPhoneVar = this.formInline.newPhone.replace(/[^0-9]/ig,"")
        let data = {phoneNumber: newPhoneVar, orderTypeName: this.typeName}
        this.$http.put('/v1/orders',data)
        .then(res => {
          console.log(res)
          if (200 === res.status){
            this.$message({ message: '手机号添加成功', type: 'success'});
            this.getOrdersPages();
            this.formInline.newPhone='';
          }
        })
        .catch(err=>{
          let {response} = err
          if (response){
            this.$message.error(response.data.message);
            return false;
          }else {
            console.log(err)
          }
        })
      },
      touchRefresh(){
        // this.getOrdersPages()
        // this.getLeftTaskNum()
        // this.getQueueLength();
        // this.formInline.newPhone='';
        this.reload();
      },
      getOrdersPages(){
        let orderTypeName = this.$route.query.typeName || this.$store.getters.getUser.orderTypeNames[0];
        let phoneNumberVar = this.formInline.phone.replace(/[^0-9]/ig,"")
        this.typeName = orderTypeName;
        let params = {
          orderTypeName,
          current: this.currentPage,
          pageSize: this.pageSize,
          phoneNumber: phoneNumberVar,
          status: this.formInline.status
        };
        this.$http.get('v1/orders/pages',{params})
          .then(res => {
            console.log(res)
            if (res.status === 200){
              this.list = res.data.list
              this.total = res.data.total
              this.currentPage = res.data.pageNum
              this.pageSize = res.data.pageSize
            }
          })
          .catch(err =>{
            console.log(err)
          })
      },
      getLeftTaskNum(){
        let orderTypeName = this.$route.query.typeName || this.$store.getters.getUser.orderTypeNames[0];
        this.typeName = orderTypeName;
        this.$http.get('/v1/tasks/num',{params: {typeName: orderTypeName}})
          .then(res => {
            console.log(res)
            if (res.status === 200){
              this.leftTaskNum = res.data;
            }
          })
          .catch(err =>{
            console.log(err)
          })
      },
      taskDetail(index, row){
        this.detail = {
          id: row.id,
          phoneNumber: row.phoneNumber,
          username: this.$store.getters.getUser.username,
          statusName: this.mapStatusOption(row.status),
          taskData: row.taskData,
          returnTime: row.returnTime,
          info: row.info
        }
        this.dialogTableVisible = true
      },
      mapStatusOption,
      handleEdit(id, phoneNumber){
        let params = {}
        this.$http.post(`v1/orders/${id}/reset`, params)
        .then(res =>{
          console.log(res)
          this.$message({ message: `号码【${phoneNumber}】重置成功`, type: 'success'});
          this.getLeftTaskNum();
          this.getOrdersPages()
        })
        .catch(err=>{
          let {response} = err
          if (response){
            this.$message.error(response.data.message);
            return false;
          }else {
            console.log(err)
          }
        })

      },
      getQueueLength() {
        let orderTypeName = this.$route.query.typeName || this.$store.getters.getUser.orderTypeNames[0];
        this.typeName = orderTypeName;
        let params = {orderTypeName}
        this.$http.get('/v1/orders/queue_length', {params})
          .then(res =>{
            console.log(res)
            if (res.status === 200){
              this.queueLength = res.data;
            }
          })
          .catch(err=>{
            let {response} = err
            if (response){
              this.$message.error(response.data.message);
              return false;
            }else {
              console.log(err)
            }
          })
      }
    },
    created() {
      this.getLeftTaskNum();
      this.getOrdersPages();
      this.getQueueLength();
    },

  }

</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix{
    text-align:left;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .query-box{
    text-align:left;
  }
  .invite-box{
    text-align:left;
    margin-left: -30px;
  }
  .country-tel-box{
    display: inline-block;
  }
  .new-tel-box{
    display: inline-block;
    margin-left: 30px;
  }
  .task-dialog-detail-box{
    text-align:left;
  }
  .yaoqing-box{
    margin-left: 30px;
  }

</style>
